<template>
  <div>
    {{name}}
    <button @click="update()">修改值</button>
  </div>
</template>

<script>
import { reactive,toRef} from "vue";
export default {
  name: "app",
  setup() {
    //   让对象是响应式的
      var obj= reactive({
          name:'zhangsan',
          age:'18'
      })
    // console.log(obj);
    // 定义响应式数据：
    // toRef是函数，转换响应式对象中*某个*属性为单独响应式数据，并且值是关联的。
        // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
    // let { name } = obj 不能直接解构，出来的是一个普通数据
    const name=toRef(obj,'name')
    const update=()=>{
        name.value="lisi"
    }
    // 这里返回的是name
    return { name,update };

  },
};
</script>
